<template>
	<view class="door">
		<u-navbar :title="title" leftIcon=" " :leftIconColor="titleColor" :titleStyle="titleStyle"
			:bgColor="'transparent'"></u-navbar>
		<view class="srch-top" :style="{'padding-top':`${44+statusHgt}px`}">
			<view class="u-flex left-srch-con">
				<view class="flex-item" @click="goSelCityPage(`/pages/subPack/homePage/selectCity`)">
					<view class="u-line-1">
					<!-- {{vuex_city==''?'选择':vuex_city}} -->
					{{selectCity.city ? selectCity.city :'选择城市'}}
					</view>
					<u-icon name="arrow-down-fill" class="u-p-l-10" :size="12" color="#515356"></u-icon>
				</view>
				<view class="line-dir">
					|
				</view>
				<input type="text" placeholder="请输入门店名称或地址" @change="selectTeaList" v-model="keyword">
				<view class="u-icon-wrap" @click="search">
					<u-icon class="u-clear-icon" :size="22" name="search"></u-icon>
				</view>
			</view>
			<view class="dres-con u-flex-col" @click="tenxun">
				<image src="../../static/adres-sel.png" mode=""></image>
				<view>
					地图找店
				</view>
			</view>
		</view>
		<view class="u-content">
			<template v-if="doorList.length>0">
				<view class="door-item u-flex" v-for="item in doorList" :key="item.id" @click="toDetail(item)">
					<image :src="item.image" mode=""></image>
					<view class="door-mes u-flex-col">
						<view class="name-gap u-flex">
							<view class="name u-line-1">
								{{item.name}}
							</view>
							<view class="gap u-flex">
								<image src="../../static/adres-prey.png" mode=""></image>
								<view>
									据您{{item.distance}}km
								</view>
							</view>
						</view>
						<view class="desk u-flex">
							<view class="desk-item">
								台球：{{item.poolTableAvailability}}桌空闲
							</view>
						</view>
						<view class="desk-price u-flex">
							<view class="price-item">
								台球：<text>{{item.poolTablePrice}}</text>元/小时
							</view>
						</view>
					</view>
				</view>
			</template>
			<view v-else class="no_data">
				<image src="../../static/no_data.png" mode=""></image>
				<view>暂无数据</view>
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" :defaultIndex="defaultIndex" :columns="columns" @cancel="show=false"
			@confirm="confirm" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	// import {selectAllStore,getProvinceList,getCityList} from '@/utils/door/index.js'
	import {
		storeListApi
	} from "@/api/mtstore";
	import store from '@/store/index.js'
	import {
		getAddress
	} from '@/utils/location/getAddress.js'
	import {
		goTenXunLoca
	} from "@/utils/tenxunLoca.js"
	export default {
		data() {
			return {
				title: '门店列表',
				titleColor: '#ffffff',
				titleStyle: {
					color: '#ffffff'
				},
				content: ``,
				vuex_city: '',
				vuex_Pro: '',
				keyword: '',
				statusHgt: 0,
				doorList: [], //门店列表
				selectCity: {}, // 当前选择的城市
				show: false,
				proList: [],
				cityList: [],
				selProId: '',
				selCityId: '',
				defaultIndex: [], //picker默认索引
				columns: [
					[],
					[]
				],
				currentLocation:{}//当前位置
			}
		},
		onLoad(option) {
			this.currentLocation = this.$store.getters.getLocation;
			this.statusHgt = getApp().globalData.statusBarHeight;
			// this.vuex_city=getApp().globalData.nowCity;
			// this.vuex_Pro=getApp().globalData.nowPro;
			// this.getAllProvince()
		},
		mounted(){
			// this.getStoreList()
		},
		onShow() {
			// this.getAllDoor(this.selCityId)
			console.log("onShow")
			this.getSelectCity(); // 获取选择的城市的信息
			this.getSelCityStoreList();
		},
		methods: {
			getStoreList() {
				let that = this;
				uni.getLocation({
					type: "gcj02",
					success(res) {
						let longitude = res.longitude
						let latitude = res.latitude
						console.log("success_longitude:" + longitude)
						console.log("success_latitude:" + latitude)
						store.commit('setLocation', {
							longitude: res.longitude,
							latitude: res.latitude,
						})

						getAddress(longitude, latitude)
							.then((res) => {
								//console.log("getAddress_res:"+res.result)
								console.log("getAddress_city:" + res.result.address_component.city)
								let cityName = res.result.address_component.city;
								let countyCode = res.result.ad_info.adcode;
								console.log("countyCode=", countyCode)
								let cityCode = "";
								let provinceCode = "";
								if (countyCode) {
									provinceCode = countyCode.substring(0, 2) + "0000";
									cityCode = countyCode.substring(0, 4) + "00";
								}
								console.log("cityCode=", cityCode)
								// 获取城市信息
								that.selectCity = {
									city: cityName,
									cityCode: cityCode,
									lat: latitude,
									lng: longitude
								}
								store.commit('setSelectCity', that.selectCity)
								// 保存定位城市信息
								let params = {
									city: cityName,
									name: cityName,
									lng: longitude,
									lat: latitude,
									cityCode: cityCode
								}
								store.commit('setLocation', params)
								let data = {
									latitude: latitude, //纬度
									longitude: longitude, //经度
									cityCode: cityCode
								};
								storeListApi(data).then(res => {
									that.doorList = res.data
								});
							})
							.catch((e) => {

								console.log(e, '解释地址失败')
							})
					},
					fail(err) {

						console.log(err, '获取经纬度失败')
						uni.showToast({
							title: "位置获取失败，请检查是否开启获取位置权限",
							icon: 'none',
							duration: 3000
						})
					}
				})



			},

			goSelCityPage(url){
				uni.navigateTo({
					url
				})
			},

			getSelectCity() { // 获取选择城市
				let selectCity = this.$store.getters.getSelectCity
				if (JSON.stringify(selectCity) != "{}") {
					this.selectCity = selectCity
				}
			},
			getSelCityStoreList(){
				let selCity = this.$store.getters.getSelectCity
				console.log("selCity:"+JSON.stringify(selCity))
				let data = {
					latitude: this.currentLocation.lat, //纬度
					longitude: this.currentLocation.lng, //经度
					cityCode: selCity.cityCode
				};
				storeListApi(data).then(res => {
					this.doorList = res.data
				})
			},




			// async getAllDoor(cid){
			// 	let params={
			// 		"lat": getApp().globalData.lat,
			// 		"lng":getApp().globalData.lng
			// 	}
			// 	if(cid) params.cid=cid;
			// 	const res= await selectAllStore(params);
			// 	if(res.code==200){
			// 		this.doorList=res.rows;
			// 	}
			// },
			// async getAllProvince(){
			// 	const res= await getProvinceList();
			// 	if(res.code==200){
			// 		this.proList=res.rows;
			// 		let arr1=res.rows.map(val=>{
			// 			return val.name
			// 		})
			// 		this.columns[0]=arr1;
			// 		let pObj=this.proList.find(item=>item.name==this.vuex_Pro);
			// 		let pInd=this.proList.find(item=>item.name==this.vuex_Pro);
			// 		this.selProId=pObj.pid;
			// 		this.getAllCity(pObj.pid,pInd)
			// 	}
			// },
			// async getAllCity(pid,ind,dia){
			// 	const res= await getCityList(pid);
			// 	if(res.code==200){
			// 		this.cityList=res.rows;
			// 		let arr1=res.rows.map(val=>{
			// 			return val.city
			// 		})
			// 		if(ind===0){
			// 			this.columns[1]=arr1;
			// 		}else{
			// 			this.$refs.uPicker.setColumnValues(1, arr1)
			// 			if(dia=='default'){
			// 				let pInd=this.proList.findIndex(item=>item.pid==this.selProId);
			// 				let cInd=this.cityList.findIndex(item=>item.city==this.vuex_city);
			// 				this.defaultIndex=[pInd,cInd]
			// 				console.log(this.defaultIndex,'this.defaultIndex')
			// 			}
			// 		}
			// 	}
			// },
			// changeHandler(e) {
			// 	const {
			// 		columnIndex,
			// 		value,
			// 		values, // values为当前变化列的数组内容
			// 		index,
			// 		// 微信小程序无法将picker实例传出来，只能通过ref操作
			// 		picker = this.$refs.uPicker
			// 	} = e
			// 	let proVal=value[0];
			// 	let pObj=this.proList.find((item)=>item.name==proVal);

			// 	this.getAllCity(pObj.pid,index)
			// },
			// // 回调参数为包含columnIndex、value、values
			// confirm(e) {
			// 	let {value}=e;
			// 	let cityName=value[1]
			// 	let cityObj=this.cityList.find((item)=>item.city==cityName);
			// 	this.selCityId=cityObj.cid;
			// 	this.selProId=cityObj.pid;
			// 	this.vuex_city=cityObj.city;
			// 	this.getAllDoor(this.selCityId)
			// 	console.log('confirm', e)
			// 	this.show = false
			// },
			// location(){
			// 	if(this.selProId&&this.vuex_city){
			// 		this.getAllCity(this.selProId,'','default')
			// 	}
			// 	this.show=true
			// },

			selectTeaList(el) { // 搜索茶室列表
				let value = el.detail.value
				this.search()
			},

			search(){
				if(!this.keyword) return
				let selCity = this.$store.getters.getSelectCity
				console.log("selCity:"+JSON.stringify(selCity))
				let data = {
					latitude: this.currentLocation.lat, //纬度
					longitude: this.currentLocation.lng, //经度
					cityCode: selCity.cityCode,
					storeName:this.keyword
				};
				storeListApi(data).then(res => {
					this.doorList = res.data
				})
			},
			toDetail(data){
				let doorMes=JSON.stringify(data)
				uni.navigateTo({
					url:`/pages/content/content?doorMes=${doorMes}`
				})
			},
			// 调起导航
			tenxun() {
				goTenXunLoca(this.selectCity.city, this.currentLocation.lat, this.currentLocation.lng);

			},
		}
	}
</script>
<style>
	page {
		background-color: #EDEDED;
	}
</style>
<style lang="scss" scoped>
	.flex-item {
		display: flex;
		align-items: center;
	}

	.srch-top {
		// position: fixed;
		// top: 44px;
		// left: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 100rpx 24rpx 0;

		.left-srch-con {
			width: 588rpx;
			height: 75rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			justify-content: space-around;
			padding: 0 20rpx;
			box-sizing: border-box;

			>input {
				width: 380rpx;
				background-color: transparent;
				border: none;
				font-size: 28rpx;
			}

			.flex-item {
				font-size: 28rpx;

				>view {
					max-width: 100rpx;
				}
			}

			.line-dir {
				color: #A9A9A9;
				margin: 0 14rpx 0 12rpx;
				font-size: 30rpx;
			}

			.u-icon-wrap {
				// margin-right: 20rpx;
			}
		}

		.dres-con {
			align-items: center;

			image {
				width: 33rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}

			view {
				font-size: 20rpx;
				color: #ffffff;
			}
		}
	}

	.door {
		width: 100vw;
		background: url(https://qn.zqbond.com/wxmp/door-bg.png) no-repeat;
		background-size: 100% 518rpx;
	}

	.u-content {
		// height: calc(100vh - 55rpx);
		// overflow-y: auto;
		min-height: 30vh;
		padding: 24rpx;

		.no_data {
			margin-top: 200rpx;

			image {
				width: 299rpx;
				height: 301rpx;
				display: block;
				margin: 0 auto;
			}

			>view {
				text-align: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.door-item {
			// width: 685rpx;
			height: 178rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			>image {
				width: 130rpx;
				height: 130rpx;
				border-radius: 4rpx;
				margin-right: 20rpx;
			}

			.door-mes {
				flex: 1;
				height: 130rpx;
				justify-content: space-between;

				.name-gap {
					justify-content: space-between;

					.name {
						max-width: 300rpx;
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
					}

					.gap {
						>image {
							width: 20rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}

						font-size: 24rpx;
						color: #666666;
					}
				}

				.desk {
					.desk-item {
						min-width: 150rpx;
						height: 38rpx;
						line-height: 38rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
						background: rgba(255, 120, 20, 0.1);
						border-radius: 4rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #FF7814;
						margin-right: 10rpx;
					}
				}

				.desk-price {
					.price-item {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						margin-right: 10rpx;

						>text {
							color: #FF7814;
						}
					}
				}
			}
		}
	}
</style>
